<template>
  <div class="goods">
    <!-- 顶部 -->
    <div class="header">
      <el-input
        v-model="keyword"
        :placeholder="$t('text.goodsplace')"
      ></el-input>
      <el-button type="primary" @click="toSearch">{{
        $t("btn.search")
      }}</el-button>
      <el-button type="primary" @click="addDialog">{{
        $t("btn.add")
      }}</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="goodsList" border style="width: 100%">
      <el-table-column
        align="center"
        type="selection"
        width="40"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="id"
        :label="$t('goodstitle.goodsId')"
        width="80"
      ></el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="title"
        :label="$t('goodstitle.goodsName')"
        width="80"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="price"
        :label="$t('goodstitle.goodsPrice')"
        width="120"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="num"
        :label="$t('goodstitle.goodsNum')"
        width="100"
      ></el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="sellPoint"
        :label="$t('goodstitle.goodsCategory')"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="image"
        :label="$t('goodstitle.goodsImg')"
        width="150"
      >
        <template slot-scope="{ row, $index }">
          <img :src="row.image" style="width: 30px; height: 30px" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="sellPoint"
        :label="$t('goodstitle.goodsSellPoint')"
        width="150"
      ></el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="descs"
        :label="$t('goodstitle.goodsDesc')"
      ></el-table-column>
      <el-table-column
        align="center"
        :label="$t('goodstitle.goodsAction')"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            style="margin-right: 10px"
            >{{ $t("btn.edit") }}</el-button
          >
          <el-popconfirm
            :title="$t('goodstitle.delText')"
            @confirm="handlerDelete(scope.$index, scope.row)"
          >
            <el-button size="mini" type="danger" slot="reference">{{
              $t("btn.del")
            }}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <Pagination
      :total="total"
      :pageSize="pageSize"
      @changePage="getPageNum"
      :currentPage="currentPage"
    />
    <!-- 弹出框 -->
    <Dialog ref="dialog" :title="title" :rowData="rowData" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import Dialog from "@/components/Dialog";
import { getGoodsList, getSearch, deleteGoods } from "@/api";
export default {
  components: {
    Pagination,
    Dialog,
  },
  data() {
    return {
      goodsList: [],
      keyword: "",
      total: 0,
      pageSize: 1,
      keyword: "",
      type: 1, // 分页类型：1、所有商品分页 2、搜索出来的商品分页
      searchList: [],
      currentPage: 1, // 当前高亮页
      title: "添加商品",
      rowData: {},
    };
  },
  methods: {
    async goodsListData(page) {
      let res = await getGoodsList({ page });
      if (res.status == 200) {
        this.goodsList = res.data;
        this.total = res.total;
        this.pageSize = res.pageSize;
        this.type = 1;
      }
    },
    getPageNum(page) {
      // 让当前点击页码高亮
      this.currentPage = page;
      if (this.type === 1) {
        // 所有商品分页
        this.goodsListData(page);
      } else {
        // 搜索商品分页
        this.goodsList = this.searchList.slice((page - 1) * 7, page * 7);
      }
    },
    async toSearch() {
      this.currentPage = 1;
      let { keyword } = this;
      if (!keyword) {
        // 输入关键字为空
        this.goodsListData(1);
        return false;
      }
      let res = await getSearch({ search: keyword });
      if (res.status == 200) {
        this.searchList = res.result;
        // 后端没有搜索的分页，前端模拟分页
        this.goodsList = res.result.slice(0, 7);
        this.total = res.result.length; //查询数目总条数
        this.pageSize = 7;
        this.type = 2;
      } else {
        // 无数据处理
        this.goodsList = [];
        this.total = 0;
        this.pageSize = 1;
      }
    },
    addDialog() {
      this.$refs.dialog.dialogVisible = true;
      this.title = "添加商品";
    },
    // 编辑
    handleEdit(index, row) {
      this.$refs.dialog.dialogVisible = true;
      this.title = "编辑商品";
      this.rowData = { ...row };
    },
    // 删除
    handlerDelete(index, row) {
      this.deleteGoodsData(row.id);
    },
    async deleteGoodsData(id) {
      let res = await deleteGoods({ id });
      if (res.status === 200) {
        this.goodsListData(1);
        this.$message({
          type: "success",
          message: "删除成功",
        });
      } else {
        this.$message({
          type: "error",
          message: "删除失败",
        });
      }
    },
  },
  mounted() {
    this.goodsListData(1);
  },
};
</script>

<style lang="less" scoped>
.goods {
  padding: 20px;

  .header {
    display: flex;
    margin-bottom: 10px;

    button {
      margin-left: 10px;
    }
  }
}
</style>